<template>
	<view class="content">
		<view class="issue">
			<view class="title">
				问题描述
			</view>
			<view class="descCon">
				<textarea v-model="feedbackText" placeholder="请填写问题描述" class="textBg" :maxlength="350" style="min-height: 200rpx;width: 646rpx;overflow: auto;"></textarea>
			</view>
		</view>
		<view class="uploadCon">
			<view class="title1">
				问题截图/视频
			</view>
			  <gzUploadPhotoAndVideo @updateValue="handleUpdate"/>
		</view>
		<view class="btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	
	import {onShow,onLoad} from '@dcloudio/uni-app'
	import {$ossFilesForm,$apiLiteFeedbackAdd } from '@/http/apiManager.js'
	import storageManage from '@/util/storageManage.js'
	import gzUploadPhotoAndVideo from './gzUploadPhotoAndVideo/index.vue'
	
	const fileList = ref([])
	const feedbackText = ref('')
	const uploadFilesRef = ref()
	
	const sourceType = ref(['album'])
	
	const onFail = (err) => {
	  console.error('文件选择失败:', err)
	  if (err.errMsg.includes('permission')) {
	    uni.showModal({
	      title: '权限申请',
	      content: '需要相册权限才能选择文件',
	      success: (res) => {
	        if (res.confirm) {
	          // 引导用户打开设置
	          uni.openSetting()
	        }
	      }
	    })
	  }
	}
	
const handleUpdate = (newValue) => {
	console.log(newValue,'newValue1111')
	fileList.value = newValue
}
	
	const handleSelect = (e) =>{
		console.log('走这里了没')
		console.log(e,'e')
		const tempFilePath = e.tempFilePaths[0]; // 获取第一张选中的图片
		uni.getFileSystemManager().getFileInfo({
						filePath: tempFilePath,
						success({ size }){
							$ossFilesForm({
								bizType: 'user',
								sourceFileName: getFileName(tempFilePath),
								sourceFileSize: size
							}).then(({ bizData }) => {
								let url = bizData.formActionUrl
								let ossFileUrl = bizData.ossFileUrl
								fileList.value.push(ossFileUrl)
								console.log(fileList.value,888899977770000000000)
								// 调用图片上传方法
								uploadImg(tempFilePath, url, bizData.formParams, ossFileUrl)
							})
							
							
							
						}
					})
		   // });
	}
	
	/**
	 * 获取文件名称
	 */
	function getFileName(name){
	  if(!name){
	    return name
	  }
	  return name.substring(name.lastIndexOf('/') + 1)
	}
	
	function uploadImg(tempFilePath, url, formParams, ossFileUrl) {
	
		const token = storageManage.token()
	
		uni.showLoading({ title: '上传中...' });
		//循环上传图片
		
		uni.uploadFile({
			url: url,
			filePath: tempFilePath,
			name: 'file',
			header: {
				'Content-Type':'multipart/form-data'
			},
			formData: formParams,
			// 代表完成的函数 注：此处可以传入三个函数  success （成功）/ fail（失败） / complete （完成）
			complete(res) {
				uni.hideLoading()
				if (res.statusCode != 200 && res.statusCode != 204) {
					$infoBox.toast('请求失败，请重试')
					return
				}
				// data.headPic = ossFileUrl
				// btnLoading.headPicLoading = false
			}
		})
	}
	
	// 提交
	const submit = () =>{
		if(!feedbackText.value){
			uni.showToast({
				title: '请填写问题描述',
				icon: 'none',
				duration: 2000
			})  
			return
		}
		$apiLiteFeedbackAdd({
			feedbackText:feedbackText.value,
			feedbackMedia01:fileList.value.length>0 ?fileList.value[0].url:'',
			feedbackMedia02:fileList.value.length>1 ?fileList.value[1].url:'',
			feedbackMedia03:fileList.value.length>2 ?fileList.value[2].url:'',
			 }).then(res=>{
				 if(res.code ==0){ 
					 uni.showModal({
					 title: '提交成功',
					 content: '您的反馈我们会认真对待，感谢您的支持！',
					 success: function (res) {
					 if (res.confirm) {
					 // 用户点击确认后的操作
					 uni.navigateBack()
					 } else {
					 // 用户点击取消后的操作
					 }
					 }
					 });
					 
				 }
			 })
	}
</script>

<style scoped lang="less">
		
	
	.content {
			width: 100%;
			min-height: 100vh;
			background: #F7F8FB;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			.btn{
				height: 90rpx;
				height: 100rpx;
				background: #24c789;
				border-radius: 50rpx;
				border: 2rpx solid #DADADA;
				border-radius: 50rpx;
				margin: 80rpx auto 0;
				
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #fff;
			}
			// overflow: hidden;
			.issue{
				width: 686rpx;
				height: 440rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 40rpx 20rpx;
				box-sizing: border-box;
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					// line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.descCon{
					margin-top: 20rpx;
					
					.textBg{
						background-color: #ECECED;
						border-radius: 8rpx;
						padding: 20rpx;
						box-sizing: border-box;
					}
				}
				
			}
			.uploadCon{
				width: 686rpx;
				height: 100%;
				min-height: 440rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 40rpx 20rpx;
				box-sizing: border-box;
				margin-top: 24rpx;
				.title1{
					
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					margin-bottom: 20rpx;
					color: #000000;
					// line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.upload{
					margin-top: 20rpx;
					width: 160rpx;
					height: 160rpx;
					background: #ECECED;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					image{
						width: 60rpx;
						height: 60rpx;
					}
					.text{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
	
			
</style>